<template>
  <div class="scrollLyrocContainer" ref="lyricContentRef">
    <div class="gap"></div>
    <div class="lyricList">
      <div
        v-for="(item, indx) in props.lyric"
        :key="item.timestamp"
        class="lyricItem"
        :class="{ active: props.curIndex == indx }"
        :style="{ opacity: !item.content ? '0' : '1' }"
        :rowindex="indx"
      >
        {{ item.content || "empty" }}
      </div>
    </div>
    <div class="gap"></div>
  </div>
</template>

<script setup lang="ts">
import { watch, ref } from "vue";
const props = defineProps<{
  lyric?: Array<{
    timestamp: string;
    content: string;
  }>;
  curIndex?: number;
  songId?: number | string;
}>();

const lyricContentRef = ref<null | HTMLElement>(null);

watch(
  () => {
    return props.curIndex;
  },
  (n) => {
    if (lyricContentRef.value) {
      const rowChild = lyricContentRef.value.querySelector(
        "div[rowindex='" + n + "']"
      );
      if (rowChild) {
        const topVal = rowChild.offsetTop - lyricContentRef.value.offsetTop;
        if (topVal - 200 > 0)
          lyricContentRef.value.scrollTo({
            top: topVal - 200,
            behavior: "smooth",
          });
      }
    }
  }
);
watch(
  () => props.songId,
  (n, o) => {
    if (n !== o && n) {
      if (lyricContentRef.value) {
        lyricContentRef.value.scrollTo({
          top: 0,
          behavior: "smooth",
        });
      }
    }
  }
);
</script>

<style scoped lang="less">
.scrollLyrocContainer {
  height: calc(100% - 76px);
  margin-top: 20px;
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background-color: rgba(255, 255, 255, 0.2);
  }

  &::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
    background-color: #cbdfdd;
  }
  .gap {
    height: 50%;
  }
  .lyricList {
    font-size: 12px;
    padding: 10px 0;
    .lyricItem {
      color: #666;
      line-height: 24px;
      margin-bottom: 16px;
      &.active {
        color: #333;
        font-weight: 600;
        font-size: 14px;
      }
    }
  }
}
</style>
